<template>
  <div id="iDadvertManagement">
    <!--操作和搜索-->
    <div class="rowBC">
      <!--操作-->
      <div style="margin-bottom: 18px">
        <el-button type="primary" icon="el-icon-plus" @click.stop.prevent="addBtnClick">新增</el-button>
        <el-button type="primary" icon="el-icon-delete" @click.stop.prevent="deleteBatchIdsReq()">删除</el-button>
      </div>
      <!--条件搜索-->
      <el-form ref="refsearchFormMixin" :inline="true" class="demo-searchFormMixin">
        <el-form-item
          label-width="0px"
          label=""
          prop="id"
          label-position="left"
        >
          <el-input v-model="searchFormMixin.id" class="widthPx-150" placeholder="id" />
        </el-form-item>
        <el-form-item
          label-width="0px"
          label=""
          prop="productName"
          label-position="left"
        >
          <el-select
            v-model="searchFormMixin.productName"
            clearable
            default-first-option
            class="widthPx-100"
            placeholder="产品名称"
          >
            <!-- <el-option v-for="(item,index) in timeOption" :key="index" :value="item.value" :label="item.label"/>-->
            <el-option :key="0" :value="0" label="下架" />
            <el-option :key="1" :value="1" label="上架" />
          </el-select>
        </el-form-item>
        <el-form-item
          label-width="0px"
          label=""
          prop="name"
          label-position="left"
        >
          <el-input v-model="searchFormMixin.name" class="widthPx-150" placeholder="广告名称" />
        </el-form-item>
        <el-form-item
          label-width="0px"
          label=""
          prop="positionName"
          label-position="left"
        >
          <el-select
            v-model="searchFormMixin.positionName"
            clearable
            default-first-option
            class="widthPx-100"
            placeholder="广告位置"
          >
            <!-- <el-option v-for="(item,index) in timeOption" :key="index" :value="item.value" :label="item.label"/>-->
            <el-option :key="0" :value="0" label="下架" />
            <el-option :key="1" :value="1" label="上架" />
          </el-select>
        </el-form-item>
        <el-form-item
          label-width="0px"
          label=""
          prop="order"
          label-position="left"
        >
          <el-input v-model="searchFormMixin.order" class="widthPx-150" placeholder="排序" />
        </el-form-item>
        <el-form-item
          label-width="0px"
          label=""
          prop="title"
          label-position="left"
        >
          <el-input v-model="searchFormMixin.title" class="widthPx-150" placeholder="图片预览" />
        </el-form-item>
        <el-form-item
          label-width="0px"
          label=""
          prop="status"
          label-position="left"
        >
          <el-select
            v-model="searchFormMixin.status"
            clearable
            default-first-option
            class="widthPx-100"
            placeholder="状态"
          >
            <!-- <el-option v-for="(item,index) in timeOption" :key="index" :value="item.value" :label="item.label"/>-->
            <el-option :key="0" :value="0" label="下架" />
            <el-option :key="1" :value="1" label="上架" />
          </el-select>
        </el-form-item>
        <el-form-item
          label-width="0px"
          label=""
          prop="photourl"
          label-position="left"
        >
          <el-input v-model="searchFormMixin.photourl" class="widthPx-150" placeholder="图片预览" />
        </el-form-item>
        <!--查询按钮-->
        <el-button type="primary" @click.stop="searchBtnClick">查询</el-button>
      </el-form>
    </div>
    <!--表格和分页-->
    <el-table
      id="resetElementDialog"
      ref="refadvertManagementTable"
      v-loading="tableLoadingMixin"
      size="mini"
      border
      :data="advertManagementListData"
      style="width: 100%"
      element-loading-background="rgba(3, 3, 3, 0.1)"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
    >
      <!--多选框-->
      <el-table-column
        type="selection"
        align="center"
        width="50"
      />
      <el-table-column
        align="center"
        prop="id"
        label="id"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="productName"
        label="产品名称"
        width="100"
      >
        <template slot-scope="{row,$index}">
          <span v-if="row.productName===0">下架</span>
          <span v-if="row.productName===1">上架</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="广告名称"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="positionName"
        label="广告位置"
        width="100"
      >
        <template slot-scope="{row,$index}">
          <span v-if="row.positionName===0">下架</span>
          <span v-if="row.positionName===1">上架</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="order"
        label="排序"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="title"
        label="图片预览"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        width="100"
      >
        <template slot-scope="{row,$index}">
          <span v-if="row.status===0">下架</span>
          <span v-if="row.status===1">上架</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="photourl"
        label="图片预览"
        min-width="100"
      />
      <!--点击操作-->
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="120"
      >
        <template slot-scope="{row,$index}">
          <el-button type="text" size="small" @click="tableHandleEditClick(row)">编辑</el-button>
          <el-button type="text" size="small" @click="tableDetailClick(row)">详情</el-button>
          <el-button type="text" size="small" @click="deleteByIdReq(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block columnCC mt-2 mb-5">
      <el-pagination
        :current-page="pageNumMixin"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSizeMixin"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotalMixin"
        @size-change="handleSizeChangeMixin"
        @current-change="handleCurrentChangeMixin"
      />
    </div>
    <!--编辑和删除-->
    <el-dialog
      :title="dialogTitleMixin"
      :visible.sync="dialogVisibleMixin"
      width="35%"
      :close-on-click-modal="false"
      class="elODialogModalBodyH60vh elODialogModal"
      :before-close="beforeCloseModal"
    >
      <el-form
        ref="refForm"
        :inline="true"
        :model="subFormMixin"
        :rules="subFormRulesMixin"
        label-width="140px"
        class="pr-5"
      >
        <el-form-item
          class="d-block"
          label-width="100px"
          label="id"
          prop="id"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <el-input v-model="subFormMixin.id" class="widthPx-150" placeholder="id" />
        </el-form-item>
        <el-form-item
          class="d-block"
          label-width="100px"
          label="产品名称"
          prop="productName"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <el-select
            v-model="subFormMixin.productName"
            clearable
            default-first-option
            class="widthPx-120"
            placeholder="状态"
          >
            <!-- <el-option v-for="(item,index) in timeOption" :key="index" :value="item.value" :label="item.label"/>-->
            <el-option :key="0" :value="0" label="下架" />
            <el-option :key="1" :value="1" label="上架" />
          </el-select>
        </el-form-item>
        <el-form-item
          class="d-block"
          label-width="100px"
          label="广告名称"
          prop="name"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <el-input v-model="subFormMixin.name" class="widthPx-150" placeholder="广告名称" />
        </el-form-item>
        <el-form-item
          class="d-block"
          label-width="100px"
          label="广告位置"
          prop="positionName"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <el-select
            v-model="subFormMixin.positionName"
            clearable
            default-first-option
            class="widthPx-120"
            placeholder="状态"
          >
            <!-- <el-option v-for="(item,index) in timeOption" :key="index" :value="item.value" :label="item.label"/>-->
            <el-option :key="0" :value="0" label="下架" />
            <el-option :key="1" :value="1" label="上架" />
          </el-select>
        </el-form-item>
        <el-form-item
          class="d-block"
          label-width="100px"
          label="排序"
          prop="order"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <el-input v-model="subFormMixin.order" class="widthPx-150" placeholder="排序" />
        </el-form-item>
        <el-form-item
          class="d-block"
          label-width="100px"
          label="图片预览"
          prop="title"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <el-input v-model="subFormMixin.title" class="widthPx-150" placeholder="图片预览" />
        </el-form-item>
        <el-form-item
          class="d-block"
          label-width="100px"
          label="状态"
          prop="status"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <el-select
            v-model="subFormMixin.status"
            clearable
            default-first-option
            class="widthPx-120"
            placeholder="状态"
          >
            <!-- <el-option v-for="(item,index) in timeOption" :key="index" :value="item.value" :label="item.label"/>-->
            <el-option :key="0" :value="0" label="下架" />
            <el-option :key="1" :value="1" label="上架" />
          </el-select>
        </el-form-item>
        <el-form-item
          label-width="100px"
          label="图片预览"
          prop="photourl"
          :rules="subFormRulesMixin.isNotNull"
          label-position="left"
        >
          <div class="rowSE">
            <img
              v-if="subFormMixin.photourl"
              :src="subFormMixin.photourl"
              class="widthPx-120 heightPx-120 border_radius5"
            >
            <div :class="[subFormMixin.photourl&&'ml-1']" class="rowSS">
              <el-button type="primary" @click="goUploadFileMixin">
                <i class="el-icon-upload2" />上传
                <input
                  id="uploadFile"
                  ref="refSettingFile"
                  type="file"
                  style="display: none;"
                  @change="fileUploadSave"
                >
              </el-button>
              <div class="ml-1">{{ this.chooseFileNameMixin }}</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" @click="beforeCloseModal">取 消</el-button>
        <el-button type="primary" @click="dialogConfirmBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!--详情-->
    <el-dialog
      v-if="detailDialogMixin"
      :title="detailDialogTitleMixin"
      :visible.sync="detailDialogMixin"
      width="35%"
      class="elODialogModalBodyH60vh elODialogModal"
      :close-on-click-modal="false"
      :before-close="beforeCloseDetailModal"
    >
      <div class="detailDialog-title">这里是标题</div>
      <div class="detail-container rowBC">
        <div class="detail-container-item">id：{{ detailData.id }}</div>
        <div class="detail-container-item">产品名称：{{ detailData.productName }}</div>
        <div class="detail-container-item">广告名称：{{ detailData.name }}</div>
        <div class="detail-container-item">广告位置：{{ detailData.positionName }}</div>
        <div class="detail-container-item">排序：{{ detailData.order }}</div>
        <div class="detail-container-item">图片预览：{{ detailData.title }}</div>
        <div class="detail-container-item">状态：{{ detailData.status }}</div>
        <div class="detail-container-item">图片预览：{{ detailData.photourl }}</div>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" @click="beforeCloseDetailModal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'CadvertManagement',
  components: {
    // TablesGZCJ,
  },
  // mixins: [elementUiCDataOrMethod],
  props: {
    // treeData: Array,
  },
  // mixins: [validMixins],
  data() {
    return {
      // form表单和rule验证
      subFormMixin: {
        id: '',
        productName: '',
        name: '',
        positionName: '',
        order: '',
        title: '',
        status: '',
        photourl: ''
      },
      searchFormMixin: {
        id: '',
        productName: '',
        name: '',
        positionName: '',
        order: '',
        title: '',
        status: '',
        photourl: ''
      },
      /* modal*/
      advertManagementListData: []
    }
  },
  computed: {
    // ...mapState('user', ['token', 'userInfo'])
  },
  watch: {
    // 'cmAddForm.enginePlatform': function(val) {
    //   console.log('enginePlatformval', val)
    //   if (val) {
    //     this.emissionOptionReq()
    //   }
    // }
  },
  created() {

  },
  mounted() {
    this.selectPageReq()
  },
  methods: {
    // ...mapActions('user', ['closeSideBar']),
    // ...mapMutations('user', ['CHAGE_TOKEN']),
    /* operate和searchForm*/
    addBtnClick() {
      this.dialogVisibleMixin = true
    },

    searchBtnClick() {
      this.pageNumMixin = 1
      this.selectPageReq()
    },
    searchFormMixinTimeRangePacking(timeArr) {
      if (timeArr && timeArr.length === 2) {
        this.subFormMixin.startTime = timeArr[0]
        this.subFormMixin.endTime = timeArr[1]
      } else {
        this.subFormMixin.startTime = ''
        this.subFormMixin.endTime = ''
      }
    },
    searchFormCasPacking(dataArr) {
      if (dataArr && dataArr.length) {
        this.searchFormMixin.modelId = dataArr[dataArr.length - 1]
      } else {
        this.searchFormMixin.modelId = ''
      }
    },
    /* table和分页*/
    async tableHandleEditClick(row) {
      this.dialogTitleMixin = `编辑【${row.name}】`
      // 获取详情数据
      const detailData = await this.selectByIdReq(row.id)
      this.reshowData(detailData)
      // 显示弹框
      this.isDialogEditMixin = true
      this.dialogVisibleMixin = true
    },
    async tableDetailClick(row) {
      this.detailDialogTitleMixin = `用户详情【${row.fullName}】`
      this.detailData = await this.selectByIdReq(row.id)
      // 显示弹框
      this.detailDialogMixin = true
    },
    /* dialog*/
    searchFormMixinTimeRangePackingSub(timeArr) {
      if (timeArr && timeArr.length === 2) {
        this.subFormMixin.startTime = timeArr[0]
        this.subFormMixin.endTime = timeArr[1]
      } else {
        this.subFormMixin.startTime = ''
        this.subFormMixin.endTime = ''
      }
    },
    casHandleVehicleChangeSub(dataArr) {
      if (dataArr && dataArr.length) {
        this.subFormMixin.modelId = dataArr[dataArr.length - 1]
      } else {
        this.subFormMixin.modelId = ''
      }
    },
    beforeCloseModal() {
      this.resetData()
    },
    dialogConfirmBtn() {
      const validFuc = (valid) => {
        if (valid) {
          if (this.isDialogEditMixin) {
            // 编辑
            this.updateByIdReq()
          } else {
            this.insertReq()
          }
        }
      }
      this.$refs.refForm.validate(validFuc)
    },
    beforeCloseDetailModal() {
      this.detailDialogMixin = false
    },
    resetData() {
      // 重置数据
      this.subFormMixin = {
        id: '',
        productName: '',
        name: '',
        positionName: '',
        order: '',
        title: '',
        status: '',
        photourl: ''
      }
      this.dialogVisibleMixin = false
      this.isDialogEditMixin = false
    },
    reshowData(row) {
      Object.keys(row).forEach(fItem => {
        Object.keys(this.subFormMixin).forEach(sItem => {
          if (fItem === sItem) {
            // console.log('复制了', sItem)
            this.subFormMixin[sItem] = row[sItem]
          }
        })
      })
      if (this.subFormMixin.startTime && this.subFormMixin.endTime) {
        this.subFormMixin.timeArrMixin = [row.startTime, row.endTime]
      }
    },
    /* 请求*/
    selectPageReq() {
      const data = Object.assign(this.searchFormMixin, {
        pageNum: this.pageNumMixin,
        pageSize: this.pageSizeMixin
      })
      Object.keys(data).forEach(fItem => {
        if (data[fItem] === '' || data[fItem] === null || data[fItem] === undefined) delete data[fItem]
      })
      this.$axiosReq({
        url: '/good-service/advertManagement/selectPage', data,
        method: 'get', bfLoading: true, isParams: true
      }).then(res => {
        this.advertManagementListDataadvertManagementListData = res.data.records
        this.pageTotalMixin = res.data.total
      })
    },
    insertReq() {
      // 删除formModal id
      const data = JSON.parse(JSON.stringify(this.subFormMixin))
      delete data.id
      this.$axiosReq({
        url: '/good-service/advertManagement', data,
        method: 'post', bfLoading: true
      }).then(res => {
        this.elMessage('添加成功')
        this.dialogVisibleMixin = false
        this.resetData()
        this.selectPageReq()
      })
    },
    updateByIdReq() {
      const data = JSON.parse(JSON.stringify(this.subFormMixin))
      this.$axiosReq({
        url: '/good-service/advertManagement/updateById', data,
        method: 'PUT', bfLoading: true
      }).then(res => {
        this.elMessage('更新成功')
        this.dialogVisibleMixin = false
        this.resetData()
        this.selectPageReq()
      })
    },
    // 根据id查看详情
    selectByIdReq(id) {
      return new Promise((resolve) => {
        const data = { id: id }
        this.$axiosReq({
          url: '/good-service/advertManagement/selectById', data,
          method: 'get', bfLoading: true, isParams: true
        }).then(res => {
          resolve(res.data)
        })
      })
    },
    // 删除单个
    async deleteByIdReq(row) {
      if (!(row && row.id)) {
        this.elMessage('删除单个的id不能为空', 'warning')
        return
      }
      const deleteNameTitle = row.name
      await this.elConfirm('删除', `您确定要删除${deleteNameTitle}吗`)
      const data = { id: row.id }
      console.log('data', data)
      this.$axiosReq({
        url: `/good-service/advertManagement/deleteById`, data, isParams: true,
        method: 'DELETE', bfLoading: true
      }).then(res => {
        this.elMessage('删除成功')
        this.selectPageReq()
      })
    },
    // 批量删除和单个删除
    async deleteBatchIdsReq() {
      let rowDeleteIdArrMixin = []
      const selectionArr = this.$refs.refadvertManagementTable
      let deleteNameTitle = ''
      rowDeleteIdArrMixin = selectionArr.selection.map(mItem => {
        deleteNameTitle = deleteNameTitle + mItem.name + ','
        return mItem.id
      })
      if (rowDeleteIdArrMixin.length === 0) {
        this.elMessage('表格选项不能为空', 'warning')
        return
      }
      const stringLength = deleteNameTitle.length - 1
      await this.elConfirm('删除', `您确定要删除${deleteNameTitle.slice(0, stringLength)}吗`)
      const data = rowDeleteIdArrMixin
      console.log('data', data)
      this.$axiosReq({
        url: `/good-service/advertManagement/deleteBatchIds`, data,
        method: 'DELETE', bfLoading: true
      }).then(res => {
        this.elMessage('删除成功')
        this.selectPageReq()
      })
    },

    // 文件上传
    fileUploadSave() {
      const formData = new FormData()
      formData.append('file', this.$refs.refSettingFile.files[0])
      this.$axiosReq({
        url: '/ty-upload/uploadGetMetaData',
        data: formData, method: 'POST', bfLoading: true, isUploadFile: true
      }).then(res => {
        // 存储文件名称
        const filename = this.$refs.refSettingFile.value
        this.chooseFileNameMixin = filename.slice(filename.lastIndexOf('\\') + 1)
        this.$refs.refSettingFile.value = ''
        // 获取图片的地址
        this.subFormMixin.url = res.data.fullPath
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  #iDadvertManagement {
    padding: 10px 10px;
  }

  .main_content {
    padding: 10px !important;
    background-color: #fff !important;
  }

  /*详情*/
  .detail-container {
    flex-wrap: wrap;
    .detail-container-item {
      width: 40%;
      margin-bottom: 20px;
    }
  }

  .detailDialog-title {
    margin-bottom: 14px;
    font-weight: bold;
    font-size: 16px;
  }
</style>

<style lang="scss">

</style>
